<template>
	<view class="popup" :class="{show:show}">
		<view class="mask" @tap="close()" @touchmove.stop.prevent>
			
		</view>
		<view class="picker">
			<view class="head">
				<view class="left">
					<text class="iconfont icon-arrow-down" @tap="close()"></text>
				</view>
				<view class="center">
					<text class="u-font-30 text-bold">选择提醒的人</text>
				</view>
				<view class="right">
					<!-- <text>多选</text> -->
				</view>
			</view>
			<view class="search-bar">
				<u-search v-model="keyword" :show-action="false" placeholder="搜索" :height="70"></u-search>
			</view>
			<scroll-view class="body" @scrolltolower="moreMember" scroll-y>
				<view v-if="canAll" class="member u-border-bottom" @tap="pickMember({userName:'所有人',userId:'all'})">
					<view class="avatar bg-blue u-flex u-row-center">
						<text class="u-font-60">@</text>
					</view>
					<view class="info">
						<text class="u-font-32">所有人</text>
					</view>
				</view>
				<view class="member u-border-bottom" v-for="item in members.list" :key="item.userId" @tap="pickMember(item)">
					<view class="avatar" :style="{backgroundImage: `url(${item.avatar})`}">
						
					</view>
					<view class="info">
						<text class="u-font-32">{{item.userName}}</text>
					</view>
				</view>
				<view class="area-b">
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {fetchGroupMember} from "@/api/addr.js"
	import {mapGetters} from "vuex"
	export default{
		props:{
			groupId:{
				type:String,
				required:true
			},
			canAll:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				show:false,
				
				keyword:'',
				members:{
					list:[],
					pageNo:1,
					pageSize:10,
					loading:false,
					nomore:false
				}
			}
		},
		computed:{
			...mapGetters('user',['userId'])
		},
		watch:{
			keyword:{
				handler(){
					this.$u.debounce(this.resetMember, 500)
				}
			}
		},
		methods:{
			open(){ 
				this.show = true
				if(this.keyword){
					this.keyword = ''
				}else{
					this.resetMember()
				}
			},
			close(){ 
				this.show = false
			},
			
			async resetMember(){
				this.members.nomore = false
				this.members.list = []
				this.members.pageNo = 1
				await this.moreMember()
			},
			
			async moreMember(){
				if(this.members.loading){
					throw new Error('正在请求中')
				}
				try{
					this.members.loading = true
					if(this.members.nomore){
						return []
					}
					const list = await fetchGroupMember({id:this.groupId,name:this.keyword,pageNo:this.members.pageNo,pageSize:this.members.pageSize})
					if(!list||list.length<this.members.pageSize){
						this.members.nomore = true
					}else{
						this.members.pageNo++
					}
					this.members.list.push(...list.filter(item=>item.userId!=this.userId))
				}finally{
					this.members.loading = false
				}
			},
			
			pickMember(member){
				this.$emit('confirm',member)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		transform: translateY(200%);
		opacity: 0;
		&.show{
			transform: translateY(0%);
			opacity: 1;
			.picker{
				transform: translateY(0%);
			}
		}
		.mask{
			width: 100%;
			height: 100%;
			background-color: rgba($color:#000000, $alpha:0.5);
		}
		.picker{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 80%;
			transform: translateY(100%);
			transition: 300ms ease-out;
		}
	}
	.picker{
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
		.head{
			position: relative;
			height: 90rpx;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			.left{
				position: absolute;
				left: 30rpx;
			}
			.right{
				position: absolute;
				right: 30rpx;
			}
		}
		.search-bar{
			height: 90rpx;
			flex-shrink: 0;
			padding: 10rpx 20rpx;
		}
		.body{
			height: calc(100% - 180rpx);
		}
		.member{
			display: flex;
			padding: 20rpx 30rpx;
			.avatar{
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;
				background-size: cover;
				border-radius: 10rpx;
			}
			.info{
				display: flex;
				align-items: center;
			}
		}
	}
</style>